<!-- 树形折叠菜单
props{
    isCollapse : 控制菜单的折叠
}  
-->

<template>
    <div class="menu">
        <el-scrollbar style="height:100vh">
            <!-- 菜单组件 -->
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="$route.path" text-color="#fff" @open="handleOpen" @close="handleClose" router
                :collapse="isCollapse" :collapse-transition="false" width="auto" unique-opened>

                <el-menu-item :index="'/index/' + item.path" v-for="item in menus.slice(0, 1)" :key="item.name">
                    <el-icon>
                        <i :class="'iconfont ' + item.meta.icon"></i>
                    </el-icon>
                    <span>{{ $t(item.meta.title) }}</span>
                </el-menu-item>

                <el-sub-menu :index="item.path" v-for="item in menus.slice(1)" :key="item.name">
                    <template #title>
                        <el-icon>
                            <i :class="'iconfont ' + item.meta.icon"></i>
                        </el-icon>
                        <span>{{ $t(item.meta.title) }}</span>
                    </template>
                    <template v-for="item2 in item.children">
                        <el-menu-item :index="'/index/' + item.path + '/' + item2.path" 
                            :key="item2.name" v-if="!item2.meta.hidden">
                            <span>{{ $t(item2.meta.title) }}</span>
                        </el-menu-item>
                    </template>

                </el-sub-menu>

            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
// menus数据用来渲染菜单组件
import menus from '@/router/page'

// 从父组件传递过来的数据
const props = defineProps({
    isCollapse: {
        type: Boolean,
        required: false
    }
})

// 展开菜单时触发
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
// 合上菜单时触发
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style scoped lang="less">
.el-menu {
    border-right: none;
    height: 100%;

    &:not(.el-menu--collapse) {
        width: 200px;
    }
}
</style>